<template>
	<view class="fiveWrap">
		<view class="innerWrap">
			<view class="fiveItem"
				:class="{'active':item.selFlag}"
				v-for="(item,index) in fiveArr"
				:key="index"
			>
				<view class="simpleTxt">
					{{item.value}}
				</view> 
				<view class="itemTit">{{item.name}}</view>
			</view>
			<view class="throughLine"></view>
			<view class="moveLine" :style="{'width':moveWidth + 'rpx'}"></view>
			<!-- <view class="moveCirWrap">
				<view class="moveCir" :style="{'left':moveLeft}"></view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			moveWidth:Number,
			moveLeft:String,
			fiveIndex:Number,
			fiveArr:Array
		},
		data(){
			return{
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fiveWrap{
		width: 100%;
		background: #fff;
		z-index: 100;
		position: fixed;
		left: 0;
		@include respTo(phone){
			height: 160rpx;
			top: calc(92rpx + var(--status-bar-height));
		}
		@include respTo(pad){
			height: 140rpx;
			top: calc(72rpx + var(--status-bar-height));
		}
		box-shadow: 0 5rpx 8rpx rgba(0,0,0,0.02);
		.innerWrap{
			height: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			@include respTo(phone){
				padding: 0 30rpx;
			}
			@include respTo(pad){
				padding: 0 20rpx;
			}
			.throughLine,
			.moveLine{
				height:8rpx;
				position:absolute;
				left:60rpx; 
				top:58rpx;
			}
			.throughLine{
				width: 80%;
				z-index:1;
				background:#cecece;
			}
			.moveLine{
				z-index: 2;
				background:$pss-color-green;
				transition: 0.5s ease-in;
			}
			.moveCirWrap{
				width: 18%;
				height: 100%;
				position: absolute;
				left: 30rpx;
				top: 0;
				z-index: 10;
			}
			.moveCir{
				border-radius: 50%;
				background: $pss-color-green;
				position: absolute;
				top: 24rpx;
				transition: 0.5s ease-in;
				@include respTo(phone){
					width: 76rpx;
					height: 76rpx;
					margin-left: -38rpx;
				}
				@include respTo(pad){
					width: 66rpx;
					height: 66rpx;
					margin-left: -44rpx;
				}
			}
			.fiveItem{
				width: 20%;
				color: $pss-text-color3;
				position: relative;
				z-index: 30;
				height: 100%;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				@include respTo(phone){
					font-size: $font-size28;
				}
				@include respTo(pad){
					font-size: $padSize18;
				}
				.itemTit{
					@include respTo(phone){
						margin-bottom: 10rpx;
					}
					@include respTo(pad){
						margin-bottom: 15rpx;
					}
				}
				.simpleTxt{
					@include respTo(phone){
						width: 82rpx;
						height: 82rpx;
						line-height: 82rpx;
						font-size: $font-size36;
					}
					@include respTo(pad){
						width: 72rpx;
						height: 72rpx;
						line-height: 72rpx;
						font-size: $padSize30;
					}
					background:#e6e6e6;
					color: #888;
					font-weight: bold;
					border-radius: 50%;
					position: absolute;
					top: 20rpx;
					left: 50%;
					margin-left: -41rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				&.active{
					.simpleTxt{
						background: $pss-color-green;
						color: #fff;
					}
				}
			}
		}
	}
</style>